@mixin slide-in-animation($direction, $className, $value) {
	@if($direction == 'X'){
		&.#{$className}{
			transform: translateX($value);
		}
	}
	@if($direction == 'Y'){
		&.#{$className}{
			transform: translateY($value);
		}
	}
}
@mixin fade-in-animation($className, $value) {
	&.#{$className}{
		opacity: $value;
	}
}
@mixin zoom-fade-in-animation($className, $x, $y, $z) {
	&.#{$className}{
		transform: scale3d($x, $y, $z);
	}
}

@media screen and (min-width: 0) and (max-width: 750px) {

	uni-page {
		opacity: 0;
		&.page-animation-enter {
			transition: all 225ms ease;
		}
		&.page-animation-leave {
			transition: all 225ms ease;
		}
		&.page-show {
			opacity: 1;
		}
		
		/* slide-in-right */
		@include slide-in-animation('X', 'slide-in-right-enter', 20px);
		@include slide-in-animation('X', 'slide-in-right-leave', 0);
		@include slide-in-animation('X', 'slide-in-right-back-enter', 20px);
		@include slide-in-animation('X', 'slide-in-right-back-leave', 0);
		
		/* slide-in-left */
		@include slide-in-animation('X', 'slide-in-left-enter', -20px);
		@include slide-in-animation('X', 'slide-in-left-leave', 0);
		@include slide-in-animation('X', 'slide-in-left-back-enter', -20px);
		@include slide-in-animation('X', 'slide-in-left-back-leave', 0);
		
		/* slide-in-top */
		@include slide-in-animation('Y', 'slide-in-top-enter', -20px);
		@include slide-in-animation('Y', 'slide-in-top-leave', 0);
		@include slide-in-animation('Y', 'slide-in-top-back-enter', -20px);
		@include slide-in-animation('Y', 'slide-in-top-back-leave', 0);
		
		/* slide-in-bottom */
		@include slide-in-animation('Y', 'slide-in-bottom-enter', 20px);
		@include slide-in-animation('Y', 'slide-in-bottom-leave', 0);
		@include slide-in-animation('Y', 'slide-in-bottom-back-enter', 20px);
		@include slide-in-animation('Y', 'slide-in-bottom-back-leave', 0);
		
		/* fade-in */
		@include fade-in-animation('fade-in-enter', 0);
		@include fade-in-animation('fade-in-leave', 1);
		
		/* fade-in-back */
		@include fade-in-animation('fade-in-back-enter', 1);
		@include fade-in-animation('fade-in-back-leave', 0);
		
		/* zoom-fade-in */
		@include zoom-fade-in-animation('zoom-fade-in-enter', 1, 1 ,1);
		@include zoom-fade-in-animation('zoom-fade-in-leave', .1, .1 ,.1);
		@include zoom-fade-in-animation('zoom-fade-in-back-enter', .1, .1 ,.1);
		@include zoom-fade-in-animation('zoom-fade-in-back-leave', 1, 1 , 1);
	}
	
}

